<template>
    <div>
<!--        {{learnContent.chapLogs}}-->
        <div v-if="learnContent && learnContent.chapLogs && learnContent.chapLogs.length">
            <div v-for="item in learnContent.chapLogs">
                <div class="ExerciseItem" @click="toChapterHistory(item)">
                    <div>
                        <span class="name">{{item.chapterName}}</span>
                    </div>
                    <div class="exam_history">
                        <span>最后做题时间：{{ proxy.$filters.dateTimeFormat(item.lastTime) }}</span>
                        <span>做题数量：{{item.didTopicNum}}</span>
                        <span>题目数量：{{item.totalTopicNum}}</span>
                    </div>
                </div>
            </div>
        </div>
        <el-empty v-else description="description" />
    </div>
</template>

<script>
    import {recentLatelyLearn} from "@/api/api";
    import {ref,watchEffect,getCurrentInstance} from 'vue'
    import {useRouter} from "vue-router";
    export default {
        name: "recentStudy",
        props:{
            subject_id:{
                type:String
            }
        },
        setup(props){
            let router = useRouter();
            const { proxy } = getCurrentInstance()
            //最近在学内容
            let learnContent = ref({});
            let getRecentLatelyLearn = () =>{
                recentLatelyLearn({courseID:localStorage.getItem('activeCourse')}).then(res =>{
                    console.log('最近在学内容',res);
                    learnContent.value = res.data
                })
            }
            getRecentLatelyLearn();

            watchEffect(() =>{
                let activeCourse = props.subject_id;
                console.log('activeCourse',activeCourse);
                getRecentLatelyLearn()
            })

            //跳转至练习记录详情
            let toChapterHistory = (item) =>{
                console.log(item)
                router.push({name:'ChapterHistory',params:{id:item.id,state:item.state}})
            }

            return{
                toChapterHistory,
                learnContent,
                proxy
            }
        }
    }
</script>

<style scoped>
    .exam_history :not(:last-child){
        margin-right: 20px;
    }
    .exam_history :not(:first-child){
        font-weight: 400;
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
    }
    .exam_history :first-child{
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
    }
    .ExerciseItem .name{
        color: rgba(11, 67, 128, 1);
        font-size: 14px;
        font-weight: 400;
    }
    .ExerciseItem{
        display: flex;
        justify-content: space-between;
        height: 30px;
        align-items: center;
        padding: 0 20px;
        background-color:  rgba(248, 248, 248, 1);
        margin-bottom: 10px;
        border-radius: 10px;
        cursor: pointer;
    }
</style>
